<template>
  <a-drawer
    title="账单详情"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 800"
    @close="closeModal"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
      paddingBottom: '80px',
    }"
  >
    <a-descriptions bordered :column="2">
      <a-descriptions-item label="收款方" :span="2">
        {{ subBillDetail.owner_name }}
      </a-descriptions-item>
      <a-descriptions-item
        label="账单类型"
        :span="$store.getters.isMobile ? 2 : undefined"
      >
        {{ subBillDetail.bill_type_txt }}
      </a-descriptions-item>
      <a-descriptions-item
        label="费用类型"
        :span="$store.getters.isMobile ? 2 : undefined"
      >
        {{ subBillDetail.cost_type_txt }}
      </a-descriptions-item>
      <a-descriptions-item label="计费周期" :span="2">
        {{ subBillDetail.start_date }}~{{ subBillDetail.end_date }}
      </a-descriptions-item>
      <a-descriptions-item
        label="账单金额"
        :span="$store.getters.isMobile ? 2 : undefined"
      >
        {{ subBillDetail.receivable_payment }}元
      </a-descriptions-item>
      <a-descriptions-item
        label="创建日期"
        :span="$store.getters.isMobile ? 2 : undefined"
      >
        {{ subBillDetail.created_at }}
      </a-descriptions-item>
      <a-descriptions-item label="账单编号" :span="2">
        <span>{{ subBillDetail.bill_number }}</span>
        <a-tooltip>
          <template #title>复制</template>
          <a-button
            type="link"
            @click="$utils.copyText(subBillDetail.bill_number)"
          >
            <template #icon>
              <CopyOutlined />
            </template>
          </a-button>
        </a-tooltip>
      </a-descriptions-item>
      <a-descriptions-item label="关联合同" :span="2">
        <template v-if="subBillDetail.contract_number">
          <span class="link" @click="toContractDetail">
            {{ subBillDetail.contract_number }}
          </span>
          <a-tooltip>
            <template #title>复制</template>
            <a-button
              type="link"
              @click="$utils.copyText(subBillDetail.contract_number)"
            >
              <template #icon>
                <CopyOutlined />
              </template>
            </a-button>
          </a-tooltip>
        </template>
        <span v-else>--</span>
      </a-descriptions-item>
      <a-descriptions-item label="账单备注" :span="2">
        {{ subBillDetail.remark || "--" }}
      </a-descriptions-item>
    </a-descriptions>
    <div class="drawer-footer">
      <a-button @click.prevent="closeModal">关闭</a-button>
    </div>
  </a-drawer>


  <!--  合同详情  -->
  <ContractDetailDrawer
    :visible="contractDetailVisible"
    :id="contractDetailId"
    @handleCancel="
        () => {
          contractDetailVisible = false;
        }
      "
  />
</template>

<script>
import {defineComponent, watch, reactive, toRefs, computed, ref, defineAsyncComponent} from "vue";
import request from "../../../../common/utils/request";
import { CopyOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const ContractDetailDrawer = defineAsyncComponent(() =>
  import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);

export default defineComponent({
  name: "SubBillDetail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  components: { CopyOutlined, ContractDetailDrawer },
  setup(props, context) {
    const $router = useRouter();

    const closeModal = () => {
      context.emit("cancel");
    };

    const state = reactive({
      subBillDetail: {},
      contractDetailVisible: false,
      contractDetailId: 0,
    });

    const getSubBillDetail = () => {
      request
        .get("/org", "/bill/subbillDetail", { id: props.id })
        .then((res) => {
          state.subBillDetail = res.detailData;
        });
    };

    const toContractDetail = () => {
      state.contractDetailId = state.subBillDetail.contract_id;
      state.contractDetailVisible = true;
    };

    const init = () => {
      getSubBillDetail();
    };

    const reset = () => {};

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      closeModal,
      toContractDetail,
    };
  },
});
</script>
